import CommonDrawer from '@/components/CommonDrawer';
import useMaterial from '@/hooks/useMaterial';
import request from '@/utils/request';
import { useRequest } from 'ahooks';
import { Descriptions, Table } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import { BOOLEAN_OPTIONS } from '../Save';

const Detail = (props) => {
  const { open, record, onCancel } = props;
  const { materialTypeMap } = useMaterial();

  const { data: groupList } = useRequest(() => {
    return request({
      url: '/base/group/list',
      method: 'get',
      params: {
        index: 0,
        size: 0,
      },
    });
  });

  const { data: lineList } = useRequest(() => {
    return request({
      url: '/datas/line/list',
      method: 'get',
      params: {
        index: 0,
        size: 0,
      },
    });
  });

  const filteredGroupList = useMemo(() => {
    return groupList?.filter((item) => {
      return record?.groups?.includes(item.groupId);
    });
  }, [groupList, record]);

  const filteredLineList = useMemo(() => {
    return lineList?.filter((item) => {
      return record?.backhauls?.includes(item.lineId);
    });
  }, [lineList, record]);

  // 格式化数据用于展示
  const formatData = (data) => {
    if (!data) return {};

    return {
      ...data,
      day: data.day ? dayjs(data.day).format('YYYY-MM-DD') : '-',
      type: materialTypeMap[data.type] || '-',
      fixed:
        BOOLEAN_OPTIONS.find((item) => item.value === data.fixed)?.label || '-',
      autoTrip:
        BOOLEAN_OPTIONS.find((item) => item.value === data.autoTrip)?.label ||
        '-',
      level: data.level === 0 ? '优秀' : data.level === 1 ? '普通' : '-',
      firstTrip:
        BOOLEAN_OPTIONS.find((item) => item.value === data.firstTrip)?.label ||
        '-',
      groups: data.groups || '-',
      backhauls: data.backhauls || '-',
      remark: data.remark || '-',
    };
  };

  const formattedRecord = formatData(record);

  const items = [
    {
      key: 'lineId',
      label: '线路',
      children: record?.lineName || record?.lineId || '-',
    },
    {
      key: 'type',
      label: '物料类型',
      children: formattedRecord.type,
    },
    {
      key: 'day',
      label: '日期',
      children: formattedRecord.day,
    },
    {
      key: 'total',
      label: '计划车数',
      children: formattedRecord.total || '-',
    },
    {
      key: 'fixed',
      label: '客户业务',
      children: formattedRecord.fixed,
    },
    {
      key: 'autoTrip',
      label: '自动派单',
      children: formattedRecord.autoTrip,
    },
    {
      key: 'level',
      label: '级别',
      children: formattedRecord.level,
    },
    {
      key: 'firstTrip',
      label: '优先派单',
      children: formattedRecord.firstTrip,
    },
    {
      key: 'remark',
      label: '备注',
      children: formattedRecord.remark,
    },
  ];

  console.log('filteredGroupListfilteredGroupList', filteredGroupList);
  return (
    <CommonDrawer
      title="详情"
      open={open}
      onClose={onCancel}
      width={800}
      destroyOnHidden
      footer={null}
    >
      <h3>计划信息</h3>
      <Descriptions
        items={items}
        column={2}
        bordered
        size="middle"
        labelStyle={{
          fontWeight: 'bold',
          width: '120px',
          textAlign: 'right',
        }}
        contentStyle={{
          minHeight: '32px',
          padding: '8px 12px',
        }}
      />
      <h3 style={{ marginTop: 16 }}>组织列表</h3>
      <Table
        bordered
        rowKey="groupId"
        columns={[
          {
            title: '组织',
            dataIndex: 'groupName',
          },
        ]}
        dataSource={filteredGroupList}
        pagination={false}
      />
      <h3 style={{ marginTop: 16 }}>回货线路列表</h3>
      <Table
        bordered
        rowKey="lineId"
        columns={[
          {
            title: '回货线路',
            dataIndex: 'lineName',
          },
        ]}
        dataSource={filteredLineList}
        pagination={false}
      />
    </CommonDrawer>
  );
};

export default Detail;
